<template>
 <div>

   <el-main style="margin-top: 0px;height:600px; width: 800px; float:left; margin-left:320px">
    <div class="articles-area">
      <el-card style="text-align: left;">
        <span><h5><strong>&A 累计: {{ total }} 条</strong></h5></span>
        <el-divider></el-divider>
        <div v-for="blog in blogs" :key="blog.bid">
             <el-avatar shape="square"
             style="border-radius: 5px; margin-right:150px;"
             :src="blog.authorAvatar"></el-avatar>
          <div style="float:left;width:85%;height:20px; margin-left: 50px; margin-top:-49px;">
            <router-link target="_blank" class="article-link" :to="{path:'blog/details',query:{id: blog.id}}"><span style="font-size: 20px;"><strong>{{blog.title}}</strong></span></router-link>
            <div>
              <span><i class="el-icon-view" ><strong style="margin-left:8px;">{{ blog.views }}</strong> </i></span>
              <span  style="float:right;margin-top:0px; color:#67C23A;"><p>{{blog.createTime | dateFmt('YYYY-MM-DD')}}</p></span>
            </div>
          </div>
          <el-divider></el-divider>
        </div>
      </el-card>
    </div>
    <el-pagination
      background
      layout="total, prev, pager, next, jumper"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total">
    </el-pagination>
</el-main>
 </div>
</template>

<script>
 export default {
   name: '',
   data () {
     return {
        blogs: [],
        pageSize: 4,
        total: 0,
        currentPage: 1,
        cid: 0,
     }
   },
   props: [],
   components: {

   },
   created () {},
   mounted () {
      this.loadBlogs()
    },
   methods: {
             loadBlogs () {
                var _this = this
                this.$axios.get('/blog/' + this.pageSize + '/1' + '/' +this.cid).then(resp => {
                  if (resp && resp.data.code === 200) {
                    _this.blogs = resp.data.data.records
                    _this.total = resp.data.data.total
                    _this.currentPage = resp.data.data.current
                  }
                })
              },
              handleCurrentChange (page) {
                var _this = this
                this.$axios.get('/blog/' + this.pageSize + '/' + page + '/' +this.cid).then(resp => {
                  if (resp && resp.data.code === 200) {
                    _this.blogs = resp.data.data.records
                    _this.total = resp.data.data.total
                    _this.currentPage = resp.data.data.current
                  }
                })
              },

          }
 }
</script>

<style lang="css" scoped>

</style>
